<template>
  <el-form
    ref="formRef"
    style="max-width: 600px"
    :model="dynamicValidateForm"
    label-width="auto"
    class="from-dynamic"
  >
    <el-form-item class="row-wrapper" prop="deafult" label="deafult">
      <div>{{ '默认值' }}</div>
      <el-input v-model="dynamicValidateForm.default" />
    </el-form-item>

    <div @click="addNewRow">
      <el-button>{{ '新增' }}</el-button>
    </div>

    <div @click="handleSubmit">
      <el-button>{{ '校验' }}</el-button>
    </div>

    <div
      v-for="(domain, index) in dynamicValidateForm.domains"
      :key="domain.uuid"
    >
      <div class="row-wrapper">
        <el-form-item
          :label="`domains[${index}].valueKey`"
          :prop="`domains[${index}].valueKey`"
          :rules="props.rules"
        >
          <el-select
            v-model="domain.valueKey"
            placeholder="Select"
            clearable
            style="width: 240px"
            @change="handleSelectChange($event, domain)"
          >
            <el-option
              v-for="item in langList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            />
          </el-select>
        </el-form-item>
        <el-form-item :prop="`domains[${index}].value`" :rules="props.rules">
          <el-input v-model="domain.value" />
        </el-form-item>

        <el-button class="mt-2" @click.prevent="removeDomain(domain)">
          Delete
        </el-button>
      </div>
    </div>
  </el-form>
</template>

<script setup>
/* @name entryForm */
import { reactive, ref, defineProps } from 'vue';
import {
  ElButton,
  ElForm,
  ElFormItem,
  ElSelect,
  ElOption,
  ElInput,
} from 'element-plus';
const props = defineProps({
  rules: {
    type: Array,
    default: function () {
      let checkValue = (rule, value, callback) => {
        if (value === '1') {
          callback(new Error('xxxx'));
        } else {
          callback();
        }
      };
      return [
        { required: true, message: '名称还未填写', trigger: 'change' },
        { validator: checkValue, trigger: 'change' },
      ];
    },
  },
});

const langList = ref([]);
const hasSelectMap = ref({});
const formRef = ref('');

const dynamicValidateForm = reactive({
  domains: [],
  default: '',
});

const getLangList = () => {
  let tmpArr = [
    { value: 'en_US', label: 'English' },
    { value: 'zh_CN', label: '中文' },
    { value: 'fr_FR', label: '法语', disabled: false },
    { value: 'fr_FR1', label: '法语1', disabled: false },
    { value: 'fr_FR2', label: '法语2', disabled: false },
    { value: 'fr_FR3', label: '法语3', disabled: false },
    { value: 'fr_FR4', label: '法语4', disabled: false },
    { value: 'fr_FR5', label: '法语5', disabled: false },
  ];
  langList.value.push(...tmpArr);
  return langList;
};
getLangList();

const addNewRow = () => {
  let item = {
    uuid: Date.now(),
    value: '',
    valueKey: '',
  };
  dynamicValidateForm.domains.push(item);
};

const removeDomain = (item) => {
  console.log('remove', item);
  dynamicValidateForm.domains = dynamicValidateForm.domains.filter((v) => {
    return v.uuid !== item.uuid;
  });
  initHasSelectMap();
};

const handleSelectChange = (value, domainItem) => {
  console.log('domainItem', domainItem);
  initHasSelectMap();
};

const initHasSelectMap = () => {
  hasSelectMap.value = {};
  dynamicValidateForm.domains.forEach((v) => {
    if (v.valueKey) {
      hasSelectMap.value[v.valueKey] = true;
    }
  });
  langList.value = handleDealData(langList.value, hasSelectMap.value);
};

// 处理数据
const handleDealData = (datalist, dataMap) => {
  return datalist.map((v) => {
    if (dataMap[v.value]) {
      v.disabled = true;
    } else {
      v.disabled = false;
    }
    return v;
  });
};

const handleSubmit = () => {
  if (!formRef.value) return;
  formRef.value.validate((valid) => {
    if (valid) {
      console.log('submit!');
    } else {
      console.log('error submit!');
      return false;
    }
  });
};
</script>

<style lang="less" scoped>
.from-dynamic {
  .row-wrapper {
    display: flex;
    :deep('.el-form-item__content') {
      display: flex;
    }
  }
}
</style>
